<template>
    <div>
        <div class="login-container">
            <div class="login-header">
                用户登录
            </div>
            <div class="login-body">
                <el-form label-width="80px" :model="user" ref="refForm" :rules="rules">
                    <el-form-item label="帐号" type="text" prop="userName">
                        <el-input v-model="user.userName" placeholder="请输入帐号" suffix-icon="el-icon-user-solid"></el-input>
                    </el-form-item>  
                    <el-form-item label="密码" prop="userPassword">
                        <el-input type="password" v-model="user.userPassword" placeholder="请输入密码" :show-password="true" @keyup.enter.native="login('refForm')"></el-input>
                    </el-form-item>       
                    <el-form-item>
                        <el-button type="primary" size="small" @click="login('refForm')">登录</el-button>
                        <el-button size="small"  @click="resetForm('refForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            user: {
                userName: '',
                userPassword: ''
            },
            rules: {
                userName:[
                    { required: true, message: '请输入帐号', trigger: 'blur' },
                    { min: 3, max: 20, message: '帐号长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                userPassword:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '密码的长度在 6 到 20 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        //登录
        login(refForm){
            console.log(this.user.userName)
            console.log(this.user.userPassword)
            this.$refs[refForm].validate(valid=>{
                if(valid){
                    this.$axios.post("user/login",this.user).then(request=>{
                        console.log(request.data.data)
                        if(request.data.statusCode==200){
                            //把emp对象保存在前端的session范围
                            //sessionStorage.setItem("emp",JSON.stringify(request.data.data))  //未成功
                            sessionStorage.setItem("userName",request.data.data.userName)
                            //弹出消息
                            this.$message({
                                message: request.data.statusMessage,
                                type: 'success'
                            })
                            //跳转到另一个组件
                            this.$router.push('/home')
                        }else{
                            this.$message.error(request.data.statusMessage)
                        }
                    })
                }else{
                    console.log("验证失败")
                }
            })
        },
        //重置
        resetForm(refForm){  
            this.$refs[refForm].resetFields();
        }
    }
    
}
</script>

<!-- scoped:样式只能在当前组件中使用 -->
<style scoped>
.login-container{
    width: 450px;
    margin: 10px auto;
    border: 1px solid #409eff;
    margin-top: 150px;
}

.login-header{
    background-color: #409eff;
    padding: 10px;
    color: ffffff;
    font-weight: bold;
    letter-spacing: 1px;
}

.login-body{
    margin-top: 20px;
    margin-right: 20px;
}
</style>